<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="村/社区" prop="areaId">
          <el-tree-select
            v-model="formData.areaId"
            :data="areaTree"
            :props="defaultProps"
            check-strictly
            accordion
            expand-on-click-node
            default-expand-all
            placeholder="请选择村/社区"
          />
      </el-form-item>
      <el-form-item label="所属机构" prop="bankId">
        <el-tree-select
          v-model="formData.bankId"
          :data="deptList"
          :props="defaultProps"
          check-strictly
          default-expand-all
          node-key="id"
          placeholder="请选择所属机构"
        />
      </el-form-item>
      <el-form-item label="行长姓名" prop="pbName">
        <el-input v-model="formData.pbName" placeholder="请输入行长姓名" />
      </el-form-item>
      <el-form-item label="行长职务" prop="position">
        <el-select v-model="formData.position" placeholder="请选择行长职务">
          <el-option
            v-for="dict in getIntDictOptions('circ_position')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="头像" prop="thumb">
        <UploadImg v-model="formData.thumb" />
      </el-form-item>
      <el-form-item label="业务经理1" prop="bmName1">
        <el-input v-model="formData.bmName1" placeholder="请输入业务经理1" />
      </el-form-item>
      <el-form-item label="职务1" prop="bmPosition1">
        <el-select v-model="formData.bmPosition1" placeholder="请选择职务1">
          <el-option
            v-for="dict in getIntDictOptions('circ_position')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" prop="bmMobile1">
        <el-input v-model="formData.bmMobile1" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="头像" prop="thumb1">
        <UploadImg v-model="formData.thumb1" />
      </el-form-item>
      <el-form-item label="业务经理2" prop="bmName2">
        <el-input v-model="formData.bmName2" placeholder="请输入业务经理2" />
      </el-form-item>
      <el-form-item label="职务2" prop="bmPosition2">
        <el-select v-model="formData.bmPosition2" placeholder="请选择职务2">
          <el-option
            v-for="dict in getIntDictOptions('circ_position')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" prop="bmMobile2">
        <el-input v-model="formData.bmMobile2" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="头像" prop="thumb2">
        <UploadImg v-model="formData.thumb2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import {getIntDictOptions} from '@/utils/dict'
import {ContactPublicApi, ContactPublicVO} from '@/api/circ/contactpublic'
import {AreaApi} from '@/api/circ/area'
import {defaultProps, handleTree} from "@/utils/tree";
import * as DeptApi from '@/api/system/dept'

/** 联系人公示，用于联系人公示、银行数据统计功能模块 表单 */
defineOptions({ name: 'ContactPublicForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  areaId: undefined,
  bankId: undefined,
  pbName: undefined,
  position: undefined,
  mobile: undefined,
  bmName1: undefined,
  bmPosition1: undefined,
  bmMobile1: undefined,
  bmName2: undefined,
  bmPosition2: undefined,
  bmMobile2: undefined,
  thumb: undefined,
  thumb1: undefined,
  thumb2: undefined
})
const formRules = reactive({
  areaId: [{ required: true, message: '县乡村编号不能为空', trigger: 'change' }],
  bankId: [{ required: true, message: '所属机构不能为空', trigger: 'change' }],
  pbName: [{ required: true, message: '行长姓名不能为空', trigger: 'blur' }],
  position: [{ required: true, message: '行长职务不能为空', trigger: 'blur' }],
  mobile: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const deptList = ref<Tree[]>([]) // 定义部门树形结构变量
const areaTree = ref<Tree[]>([]) // 定义县乡村树形结构变量

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ContactPublicApi.getContactPublic(id);
      console.log(formData.value);
    } finally {
      formLoading.value = false
    }
  }
  // 加载部门树
  const deptParams = reactive({deleted: 0  })
  deptList.value = handleTree(await DeptApi.getSimpleDeptListAppApi(deptParams))
  // 【加载县乡村树】
  await getAreaTree()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 获得县乡村树 */
const getAreaTree = async () => {
  areaTree.value = []
  const data = await AreaApi.getAreaList('')
  const root: Tree = { id: 0, name: '顶级县乡村', children: [] }
  root.children = handleTree(data, 'id', 'parentId')
  areaTree.value.push(root)
}

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ContactPublicVO
    if (formType.value === 'create') {
      await ContactPublicApi.createContactPublic(data)
      message.success(t('common.createSuccess'))
    } else {
      await ContactPublicApi.updateContactPublic(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    areaId: undefined,
    bankId: undefined,
    pbName: undefined,
    position: undefined,
    mobile: undefined,
    bmName1: undefined,
    bmPosition1: undefined,
    bmMobile1: undefined,
    bmName2: undefined,
    bmPosition2: undefined,
    bmMobile2: undefined
  }
  formRef.value?.resetFields()
}


</script>
